<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>集水井监测</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link href="https://cdn.jsdelivr.net/npm/boxicons@2.0.7/css/boxicons.min.css" rel="stylesheet">
    <style>
        body { font-family: 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif; background: #f5f7fa; margin: 0; padding: 0; }
        .container { max-width: 1200px; margin: 40px auto; background: #fff; border-radius: 8px; box-shadow: 0 2px 12px 0 rgba(0,0,0,.08); padding: 32px 24px 24px 24px; }
        .title { font-size: 22px; font-weight: bold; color: #1565C0; margin-bottom: 24px; }
        .section { margin-bottom: 28px; }
        .el-card__header { font-size: 16px; font-weight: 600; color: #303133; }
        .device-table { margin-top: 12px; }
        .alert-table { margin-top: 12px; }
        .point-map { width: 100%; height: 320px; background: #f5f7fa url('sump-well-bg.png') center/cover no-repeat; border: 1px solid #ebeef5; border-radius: 8px; position: relative; display: flex; align-items: center; justify-content: center; color: #909399; font-size: 18px; }
        .point-marker { position: absolute; width: 32px; height: 32px; background: #1565C0; color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 18px; cursor: pointer; border: 2px solid #fff; box-shadow: 0 2px 8px rgba(21,101,192,0.15); }
        .dashboard-card { transition: transform 0.25s cubic-bezier(.4,2,.6,1); will-change: transform; }
        .dashboard-vertical { display: flex; flex-direction: column; gap: 0; }
        .alarm-stat-card { background: linear-gradient(90deg, #f5f7fa 60%, #e3f2fd 100%); border-radius: 14px; box-shadow: 0 2px 12px 0 rgba(21,101,192,0.06); padding-bottom: 18px; }
        .alarm-stat-title { font-size: 20px; font-weight: bold; color: #1a237e; letter-spacing: 1px; display: flex; align-items: center; }
        .alarm-stat-row { display: flex; justify-content: space-around; align-items: flex-end; margin-top: 18px; margin-bottom: 6px; gap: 12px; }
        .alarm-stat-item { flex: 1; background: #fff; border-radius: 10px; box-shadow: 0 1px 4px 0 rgba(21,101,192,0.04); padding: 18px 0 10px 0; display: flex; flex-direction: column; align-items: center; min-width: 90px; }
        .alarm-stat-label { font-size: 15px; color: #607d8b; margin-bottom: 8px; }
        .alarm-stat-num { font-size: 36px; font-weight: bold; letter-spacing: 2px; line-height: 1.1; margin-bottom: 2px; transition: color 0.3s; }
        .alarm-total { color: #1a237e; text-shadow: 0 2px 8px #e3f2fd; }
        .alarm-unhandled { color: #C62828; text-shadow: 0 2px 8px #ffcdd2; }
        .alarm-handled { color: #2E7D32; text-shadow: 0 2px 8px #c8e6c9; }
        .chart-container { width: 100%; height: 260px; padding: 0; margin: 0; box-sizing: border-box; }
        .chart-full { width: 100%; height: 100%; min-height: 180px; }
        .el-button.center-text { display: flex !important; align-items: center; justify-content: center; font-size: 14px; font-weight: bold; height: 28px; min-width: 80px; border-radius: 0; padding: 0 18px; line-height: 28px; }
        .alarm-section-card { border: 2px solid #F56C6C !important; background: #FEF0F0 !important; }
    </style>
</head>
<body>
    <div id="sump-well-monitor">
        <div class="container">
            <div class="title"><i class='bx bx-droplet'></i> 集水井监测</div>
            <el-tabs v-model="activeTab">
                <!-- 1. 井房列表 -->
                <el-tab-pane label="井房列表" name="list">
                    <el-table :data="wells" border stripe size="small">
                        <el-table-column prop="name" label="集水井区域" width="180"></el-table-column>
                        <el-table-column label="绑定集水井数量">
                            <template slot-scope="scope">
                                {{ getBindDeviceCount(scope.row) }}
                            </template>
                        </el-table-column>
                        <el-table-column label="是否有离线">
                            <template slot-scope="scope">
                                <el-tag :type="hasOffline(scope.row) ? 'danger' : 'success'" size="mini">{{ hasOffline(scope.row) ? '是' : '否' }}</el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column label="是否有告警">
                            <template slot-scope="scope">
                                <el-tag :type="scope.row.alert ? 'danger' : 'success'" size="mini">{{scope.row.alert ? '是' : '否'}}</el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" width="220">
                            <template slot-scope="scope">
                                <div style="display: flex; flex-direction: row; gap: 12px; justify-content: center; align-items: center; width: 100%;">
                                    <el-button size="mini" type="primary" class="center-text" @click="openBindDialog(scope.row)">绑定信息</el-button>
                                    <el-button size="mini" type="success" class="center-text" style="min-width: 100px;" @click="openPointDialog(scope.row)">井房点位配置</el-button>
                                </div>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>
                <!-- 2. 综合仪表盘 -->
                <el-tab-pane label="综合仪表盘" name="dashboard">
                    <div style="margin-bottom:18px;display:flex;align-items:center;gap:18px;">
                        <el-select v-model="dashboardWell" placeholder="请选择集水井区域" style="width:220px;">
                            <el-option v-for="well in wells" :key="well.name" :label="well.name" :value="well.name"></el-option>
                        </el-select>
                        <el-select v-model="dashboardSump" placeholder="请选择集水井设备" style="width:180px;">
                            <el-option v-for="sump in sumps.filter(s=>s.well===dashboardWell)" :key="sump.name" :label="sump.name" :value="sump.name"></el-option>
                        </el-select>
                        <el-radio-group v-model="dashboardPeriod" size="small">
                            <el-radio-button label="day">日</el-radio-button>
                            <el-radio-button label="week">周</el-radio-button>
                            <el-radio-button label="month">月</el-radio-button>
                        </el-radio-group>
                    </div>
                    <div class="dashboard-vertical">
                        <el-card class="dashboard-card alarm-stat-card" shadow="hover" style="margin-bottom:18px;">
                            <div slot="header" class="alarm-stat-title">
                                <i class="el-icon-warning-outline" style="color:#C62828;margin-right:8px;"></i>告警统计
                            </div>
                            <div class="alarm-stat-row">
                                <div class="alarm-stat-item">
                                    <div class="alarm-stat-label">所有告警</div>
                                    <div class="alarm-stat-num alarm-total" id="alarm-total">0</div>
                                </div>
                                <div class="alarm-stat-item">
                                    <div class="alarm-stat-label">未处理</div>
                                    <div class="alarm-stat-num alarm-unhandled" id="alarm-unhandled">0</div>
                                </div>
                                <div class="alarm-stat-item">
                                    <div class="alarm-stat-label">已处理</div>
                                    <div class="alarm-stat-num alarm-handled" id="alarm-handled">0</div>
                                </div>
                            </div>
                        </el-card>
                        <el-row :gutter="18">
                            <el-col :span="12">
                                <el-card class="dashboard-card" shadow="hover" style="margin-bottom:18px;">
                                    <div slot="header">液位变化</div>
                                    <div class="chart-container" style="height:220px;">
                                        <div :id="'level-chart'" class="chart-full"></div>
                                    </div>
                                </el-card>
                            </el-col>
                            <el-col :span="12">
                                <el-card class="dashboard-card" shadow="hover" style="margin-bottom:18px;">
                                    <div slot="header">水泵启动次数统计</div>
                                    <div class="chart-container" style="height:220px;">
                                        <div :id="'pump-count-chart'" class="chart-full"></div>
                                    </div>
                                </el-card>
                            </el-col>
                        </el-row>
                    </div>
                </el-tab-pane>
                <!-- 3. 设备详情监控 -->
                <el-tab-pane label="设备详情监控" name="device">
                    <div style="margin-bottom:16px;display:flex;align-items:center;gap:18px;">
                        <el-select v-model="selectedWell" placeholder="请选择井房" style="width:220px;">
                            <el-option v-for="well in wells" :key="well.name" :label="well.name" :value="well.name"></el-option>
                        </el-select>
                        <el-select v-model="selectedSump" placeholder="请选择集水井" style="width:180px;">
                            <el-option v-for="sump in sumps.filter(s=>s.well===selectedWell)" :key="sump.name" :label="sump.name" :value="sump.name"></el-option>
                        </el-select>
                    </div>
                    <div v-for="sump in sumps.filter(s=>s.well===selectedWell && (!selectedSump || s.name===selectedSump))" :key="sump.name" style="margin-bottom:32px;">
                        <el-card class="section" shadow="hover" style="margin-bottom:12px;">
                            <div slot="header" style="font-size:18px;font-weight:bold;display:flex;align-items:center;gap:18px;">
                                {{sump.name}} 液位：
                                <div style="display: flex; align-items: center; gap: 15px;">
                                    <!-- 下拉列表 -->
                                    <el-select 
                                        v-model="sump.levelInput" 
                                        placeholder="选择液位值" 
                                        size="small" 
                                        style="width: 100px;"
                                        @change="updateSumpLevelFromSelect(sump)">
                                        <el-option 
                                            v-for="value in levelOptions" 
                                            :key="value" 
                                            :label="value + '米'" 
                                            :value="value.toString()">
                                        </el-option>
                                    </el-select>

                                    <div style="flex: 1; position: relative;">
                                        <span style="font-weight: bold; color: #303133; min-width: 60px;">
                                            {{getSumpLevelValue(sump.level)}}米
                                        </span>
                                        <div style="flex: 1; position: relative;">
                                            <!-- 进度条背景 -->
                                            <div style="width: 500px; height: 20px; background: #E4E7ED; border-radius: 10px; position: relative; overflow: hidden;">
                                                <!-- 动态进度条 -->
                                                <div :style="{
                                                    width: getSumpLevelPercentage(sump.level) + '%',
                                                    height: '100%',
                                                    background: getSumpLevelStatusColor(sump.level, sump.name) === 'danger' ? '#F56C6C' : 
                                                               getSumpLevelStatusColor(sump.level, sump.name) === 'warning' ? '#E6A23C' : 
                                                               getSumpLevelStatusColor(sump.level, sump.name) === 'success' ? '#67C23A' : '#909399',
                                                    borderRadius: '10px',
                                                    transition: 'width 0.3s ease'
                                                }"></div>
                                            </div>
                                            <!-- 指示器箭头 -->
                                            <div :style="{
                                                position: 'absolute',
                                                top: '-5px',
                                                left: getSumpLevelPercentage(sump.level) + '%',
                                                transform: 'translateX(-50%)',
                                                width: '0',
                                                height: '0',
                                                borderLeft: '8px solid transparent',
                                                borderRight: '8px solid transparent',
                                                borderTop: '12px solid #303133',
                                                zIndex: '10'
                                            }"></div>
                                            <!-- 当前值标签 -->
                                            <div :style="{
                                                position: 'absolute',
                                                top: '-30px',
                                                left: getSumpLevelPercentage(sump.level) + '%',
                                                transform: 'translateX(-50%)',
                                                background: '#303133',
                                                color: 'white',
                                                padding: '2px 6px',
                                                borderRadius: '4px',
                                                fontSize: '12px',
                                                whiteSpace: 'nowrap',
                                                zIndex: '10'
                                            }">
                                                {{getSumpLevelValue(sump.level)}}米
                                            </div>
                                            <!-- 刻度标记 -->
                                            <div style="display: flex; justify-content: space-between; margin-top: 5px; font-size: 11px; color: #606266;">
                                                <span>0米</span>
                                                <span>2米</span>
                                                <span>4米</span>
                                                <span>6米</span>
                                                <span>8米</span>
                                                <span>10米</span>
                                            </div>
                                            <!-- 状态标签 -->
                                            <div style="display: flex; justify-content: center; margin-top: 2px; font-size: 10px;">
                                                <span :style="{
                                                    background: getSumpLevelStatusColor(sump.level, sump.name) === 'danger' ? '#F56C6C' : 
                                                               getSumpLevelStatusColor(sump.level, sump.name) === 'warning' ? '#E6A23C' : 
                                                               getSumpLevelStatusColor(sump.level, sump.name) === 'success' ? '#67C23A' : '#909399',
                                                    color: 'white',
                                                    padding: '2px 6px',
                                                    borderRadius: '4px',
                                                    fontWeight: 'bold'
                                                }">
                                                    {{getSumpLevelStatusText(sump.level, sump.name)}}
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <el-table :data="devices.filter(d=>d.well===selectedWell && d.sump===sump.name && d.type==='水泵')" border stripe class="device-table" size="small" style="margin-top:8px;">
                                <el-table-column prop="name" label="水泵名称" width="140"></el-table-column>
                                <el-table-column label="水泵状态" width="100">
                                    <template slot-scope="scope">
                                        <el-tag :type="getPumpStatusType(scope.row.status)" size="mini">{{scope.row.status}}</el-tag>
                                    </template>
                                </el-table-column>
                                <el-table-column label="控制模式" width="100">
                                    <template slot-scope="scope">
                                        <el-tag :type="scope.row.mode==='自动'?'success':scope.row.mode==='手动'?'info':'warning'" size="mini">{{scope.row.mode}}</el-tag>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="temp" label="水泵温度" width="100"></el-table-column>
                                <el-table-column prop="noise" label="水泵噪声" width="100"></el-table-column>
                                <el-table-column prop="current" label="电流" width="80"></el-table-column>
                                <el-table-column prop="voltage" label="电压" width="80"></el-table-column>
                                <el-table-column label="远程启动" width="110">
                                    <template slot-scope="scope">
                                        <el-button size="mini" type="primary" @click="remotePumpControl(scope.row, 'start')">启动</el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </el-card>
                    </div>
                    <el-card class="section alarm-section-card" shadow="hover" style="margin-bottom:0; border:2px solid #F56C6C; background:#FEF0F0;">
                        <div slot="header" style="color:#C62828; font-weight:bold; display:flex; align-items:center;"><i class="el-icon-warning-outline" style="margin-right:8px;"></i>告警列表</div>
                        <el-table :data="filteredAlerts.filter(a=>a.status==='未处理' && (!selectedSump || a.device.includes(selectedSump)))" border stripe class="alert-table" size="small" @row-dblclick="handleAlertDoubleClick" style="cursor: pointer;">
                            <el-table-column prop="device" label="设备"></el-table-column>
                            <el-table-column prop="type" label="告警类型"></el-table-column>
                            <el-table-column prop="status" label="状态">
                                <template slot-scope="scope">
                                    <el-tag :type="scope.row.status==='未处理'?'danger':'success'" size="mini">{{scope.row.status}}</el-tag>
                                </template>
                            </el-table-column>
                            <el-table-column prop="time" label="时间"></el-table-column>
                            <el-table-column label="操作提示" width="100">
                                <template slot-scope="scope">
                                    <el-tag type="info" size="mini">双击处理</el-tag>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-card>
                </el-tab-pane>
                <!-- 4. 井房点位图 -->
                <el-tab-pane label="井房点位图" name="map">
                    <el-select v-model="selectedWell" placeholder="请选择井房" style="margin-bottom:16px;width:220px;">
                        <el-option v-for="well in wells" :key="well.name" :label="well.name" :value="well.name"></el-option>
                    </el-select>
                    <el-card class="section" shadow="hover">
                        <div slot="header">井房点位图</div>
                        <div class="point-map">
                            <span v-if="!pointMarkers[selectedWell]">暂无背景图和点位信息</span>
                            <template v-else>
                                <span style="color:#1565C0;">[背景图占位]</span>
                                <div v-for="(marker, idx) in pointMarkers[selectedWell]" :key="idx" class="point-marker" :style="{left: marker.x+'%', top: marker.y+'%'}" :title="marker.device" @click="selectDevice(marker)">
                                    <div style="position:absolute;top:-28px;left:50%;transform:translateX(-50%);font-size:13px;font-weight:bold;color:#333;white-space:nowrap;">{{marker.device}}</div>
                                    <i :class="deviceImages[marker.device] || 'el-icon-suitcase'" style="font-size:28px;"></i>
                                    <div style="position:absolute;bottom:-32px;left:50%;transform:translateX(-50%);display:flex;gap:4px;">
                                        <el-tag :type="isDeviceOffline(marker.device) ? 'danger' : 'success'" size="mini">{{isDeviceOffline(marker.device) ? '离线' : '在线'}}</el-tag>
                                        <el-tag :type="getDeviceAlertStatus(marker.device) ? 'danger' : 'success'" size="mini">{{getDeviceAlertStatus(marker.device) ? '告警' : '正常'}}</el-tag>
                                    </div>
                                </div>
                            </template>
                        </div>
                        <div v-if="selectedDevice" class="device-detail-panel">
                            <el-card shadow="never" style="margin-top:18px;">
                                <div slot="header" style="font-size:18px;font-weight:bold;display:flex;align-items:center;gap:18px;">
                                    {{selectedDevice.device}} 液位：
                                    <span style="color:#1565C0;font-size:22px;font-weight:bold;">{{getSumpLevel(selectedWell, selectedDevice.device)}}</span>
                                </div>
                                <el-table :data="devices.filter(d=>d.well===selectedWell && d.sump===selectedDevice.device && d.type==='水泵')" border stripe size="small" style="margin-top:8px;">
                                    <el-table-column prop="name" label="水泵名称" width="140"></el-table-column>
                                    <el-table-column label="水泵状态" width="100">
                                        <template slot-scope="scope">
                                            <el-tag :type="getPumpStatusType(scope.row.status)" size="mini">{{scope.row.status}}</el-tag>
                                        </template>
                                    </el-table-column>
                                    <el-table-column label="控制模式" width="100">
                                        <template slot-scope="scope">
                                            <el-tag :type="scope.row.mode==='自动'?'success':scope.row.mode==='手动'?'info':'warning'" size="mini">{{scope.row.mode}}</el-tag>
                                        </template>
                                    </el-table-column>
                                    <el-table-column prop="temp" label="水泵温度" width="100"></el-table-column>
                                    <el-table-column prop="noise" label="水泵噪声" width="100"></el-table-column>
                                    <el-table-column prop="current" label="电流" width="80"></el-table-column>
                                    <el-table-column prop="voltage" label="电压" width="80"></el-table-column>
                                    <el-table-column label="远程启动" width="110">
                                        <template slot-scope="scope">
                                            <el-button size="mini" type="primary" @click="remotePumpControl(scope.row, 'start')">启动</el-button>
                                        </template>
                                    </el-table-column>
                                </el-table>
                                <div style="margin-top:16px;">
                                    <b>告警列表</b>
                                    <el-table :data="getDeviceAlerts(selectedDevice.device)" border stripe size="mini" style="margin-top:6px;">
                                        <el-table-column prop="type" label="告警类型"></el-table-column>
                                        <el-table-column prop="status" label="状态"></el-table-column>
                                        <el-table-column prop="time" label="时间"></el-table-column>
                                    </el-table>
                                </div>
                            </el-card>
                        </div>
                    </el-card>
                </el-tab-pane>
            </el-tabs>
        </div>
        <!-- 井房绑定弹窗 -->
        <el-dialog :visible.sync="bindDialogVisible" title="井房绑定集水井设备" width="800px" append-to-body>
            <el-form :model="bindForm" label-width="140px" size="small">
                <el-form-item label="井房名称">
                    <el-input v-model="bindForm.name" disabled></el-input>
                </el-form-item>
                <el-form-item label="绑定集水井设备">
                    <div style="margin-bottom: 10px;">
                        <el-button size="mini" type="primary" @click="showSumpDeviceSelector">
                            <i class="el-icon-plus"></i> 添加集水井设备
                        </el-button>
                    </div>
                    <div v-for="(device, index) in bindForm.sumpDevices" :key="index" style="border: 1px solid #EBEEF5; border-radius: 4px; padding: 12px; margin-bottom: 10px; background: #FAFAFA;">
                        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;">
                            <span style="font-weight: bold; color: #303133;">{{device.name}}</span>
                            <!-- 删除按钮已移除 -->
                        </div>
                        <el-row :gutter="12">
                            <el-col :span="12">
                                <el-form-item label="有效范围最小值" label-width="120px" size="small">
                                    <el-input v-model="device.minValue" placeholder="如：0" style="width: 100%;" @input="onSumpRangeChange(index)">
                                        <template slot="append">米</template>
                                    </el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="有效范围最大值" label-width="120px" size="small">
                                    <el-input v-model="device.maxValue" placeholder="如：10" style="width: 100%;" @input="onSumpRangeChange(index)">
                                        <template slot="append">米</template>
                                    </el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="12">
                            <el-col :span="16">
                                <el-form-item label="操作" label-width="50px" size="small">
                                    <el-button 
                                        v-if="device.showRefreshButton" 
                                        type="primary" 
                                        size="small" 
                                        @click="refreshSumpEffectiveRange(index)"
                                        style="margin-top: 8px;">
                                        刷新有效范围
                                    </el-button>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="12">
                            <el-col :span="24">
                                <el-form-item label="预警范围显示" label-width="100px" size="small">
                                    <div style="display: flex; flex-direction: column; gap: 8px;">
                                        <div style="display: flex; align-items: center; gap: 8px; flex-wrap: wrap;">
                                            <span style="font-size: 12px; color: #606266; min-width: 50px;">超低:</span>
                                            <span style="font-size: 12px; color: #303133;">{{device.warningRanges ? device.warningRanges.ultraLow : "0 - 2"}} {{device.unit}}</span>
                                            <span style="font-size: 12px; color: #F56C6C;">红色</span>
                                        </div>
                                        <div style="display: flex; align-items: center; gap: 8px; flex-wrap: wrap;">
                                            <span style="font-size: 12px; color: #606266; min-width: 50px;">低:</span>
                                            <span style="font-size: 12px; color: #303133;">{{device.warningRanges ? device.warningRanges.low : "2 - 4"}} {{device.unit}}</span>
                                            <span style="font-size: 12px; color: #E6A23C;">黄色</span>
                                        </div>
                                        <div style="display: flex; align-items: center; gap: 8px; flex-wrap: wrap;">
                                            <span style="font-size: 12px; color: #606266; min-width: 50px;">正常:</span>
                                            <span style="font-size: 12px; color: #303133;">{{device.warningRanges ? device.warningRanges.normal : "4 - 6"}} {{device.unit}}</span>
                                            <span style="font-size: 12px; color: #67C23A;">绿色</span>
                                        </div>
                                        <div style="display: flex; align-items: center; gap: 8px; flex-wrap: wrap;">
                                            <span style="font-size: 12px; color: #606266; min-width: 50px;">高:</span>
                                            <span style="font-size: 12px; color: #303133;">{{device.warningRanges ? device.warningRanges.high : "6 - 8"}} {{device.unit}}</span>
                                            <span style="font-size: 12px; color: #E6A23C;">黄色</span>
                                        </div>
                                        <div style="display: flex; align-items: center; gap: 8px; flex-wrap: wrap;">
                                            <span style="font-size: 12px; color: #606266; min-width: 50px;">超高:</span>
                                            <span style="font-size: 12px; color: #303133;">{{device.warningRanges ? device.warningRanges.ultraHigh : "8 - 10"}} {{device.unit}}</span>
                                            <span style="font-size: 12px; color: #F56C6C;">红色</span>
                                        </div>
                                    </div>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="12">
                            <el-col :span="24">
                                <el-form-item label="预警值配置" label-width="100px" size="small">
                                    <div style="display: flex; align-items: center; gap: 8px; flex-wrap: wrap;">
                                        <input type="text" :id="'sumpWarningValue1_' + index" placeholder="值1" value="0" readonly style="width: 80px; height: 28px; padding: 0 8px; border: 1px solid #DCDFE6; border-radius: 4px; font-size: 12px; background-color: #F5F7FA;">
                                        <span style="font-size: 12px; color: #606266;">{{device.unit}}</span>
                                        <input type="text" :id="'sumpWarningValue2_' + index" placeholder="值2" style="width: 80px; height: 28px; padding: 0 8px; border: 1px solid #DCDFE6; border-radius: 4px; font-size: 12px;" @input="onSumpWarningValueInput(index)">
                                        <span style="font-size: 12px; color: #606266;">{{device.unit}}</span>
                                        <input type="text" :id="'sumpWarningValue3_' + index" placeholder="值3" style="width: 80px; height: 28px; padding: 0 8px; border: 1px solid #DCDFE6; border-radius: 4px; font-size: 12px;" @input="onSumpWarningValueInput(index)">
                                        <span style="font-size: 12px; color: #606266;">{{device.unit}}</span>
                                        <input type="text" :id="'sumpWarningValue4_' + index" placeholder="值4" style="width: 80px; height: 28px; padding: 0 8px; border: 1px solid #DCDFE6; border-radius: 4px; font-size: 12px;" @input="onSumpWarningValueInput(index)">
                                        <span style="font-size: 12px; color: #606266;">{{device.unit}}</span>
                                        <input type="text" :id="'sumpWarningValue5_' + index" placeholder="值5" style="width: 80px; height: 28px; padding: 0 8px; border: 1px solid #DCDFE6; border-radius: 4px; font-size: 12px;" @input="onSumpWarningValueInput(index)">
                                        <span style="font-size: 12px; color: #606266;">{{device.unit}}</span>
                                        <input type="text" :id="'sumpWarningValue6_' + index" placeholder="值6" value="10" readonly style="width: 80px; height: 28px; padding: 0 8px; border: 1px solid #DCDFE6; border-radius: 4px; font-size: 12px; background-color: #F5F7FA;">
                                        <span style="font-size: 12px; color: #606266;">{{device.unit}}</span>
                                    </div>
                                    <el-button 
                                        v-if="device.showWarningRefreshButton" 
                                        type="success" 
                                        size="small" 
                                        @click="refreshSumpWarningRanges(index)"
                                        style="margin-top: 8px;">
                                        刷新预警范围
                                    </el-button>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </div>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="bindDialogVisible=false">取 消</el-button>
                <el-button type="primary" @click="saveBindInfo">确 定</el-button>
            </div>
        </el-dialog>
        <!-- 点位配置弹窗 -->
        <el-dialog :visible.sync="pointDialogVisible" title="井房点位配置" width="700px" append-to-body>
            <el-form label-width="120px" size="small">
                <el-form-item label="背景设置">
                    <el-radio-group v-model="pointBgMode">
                        <el-radio label="image">上传图片</el-radio>
                        <el-radio label="color">纯色背景</el-radio>
                    </el-radio-group>
                    <div v-if="pointBgMode==='image'" style="margin-top:8px;">
                        <el-upload class="upload-demo" drag action="#" :show-file-list="false" :on-change="handlePointBgUpload">
                            <i class="el-icon-upload"></i>
                            <div class="el-upload__text">将图片拖到此处，或<em>点击上传</em></div>
                        </el-upload>
                        <div v-if="pointBgUrl" style="margin-top:8px;"><img :src="pointBgUrl" style="max-width:100%;max-height:120px;border-radius:4px;"></div>
                    </div>
                    <div v-else style="margin-top:8px;">
                        <el-color-picker v-model="pointBgColor"></el-color-picker>
                        <span style="margin-left:12px;">当前颜色：<span :style="{background:pointBgColor,display:'inline-block',width:'32px',height:'16px',borderRadius:'4px',border:'1px solid #eee'}"></span></span>
                    </div>
                </el-form-item>
                <el-form-item label="设备点位配置">
                    <el-table :data="pointDevices" border size="mini">
                        <el-table-column label="设备" width="120">
                            <template slot-scope="scope">
                                <i :class="deviceImages[scope.row.name]" style="font-size:24px;color:#1565C0;margin-right:6px;vertical-align:middle;"></i>{{scope.row.name}}
                            </template>
                        </el-table-column>
                        <el-table-column label="类型" prop="type" width="80"></el-table-column>
                        <el-table-column label="X坐标" width="90">
                            <template slot-scope="scope">
                                <el-input v-model="scope.row.x" size="mini" placeholder="X"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column label="Y坐标" width="90">
                            <template slot-scope="scope">
                                <el-input v-model="scope.row.y" size="mini" placeholder="Y"></el-input>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-form-item>
                <el-form-item label="点位预览">
                    <div style="position:relative;width:100%;height:220px;border-radius:8px;overflow:hidden;border:1px solid #ebeef5;background:#f5f7fa;">
                        <img v-if="pointBgMode==='image' && pointBgUrl" :src="pointBgUrl" style="width:100%;height:100%;object-fit:cover;position:absolute;left:0;top:0;z-index:1;">
                        <div v-else :style="{background:pointBgColor,width:'100%',height:'100%',position:'absolute',left:0,top:0,zIndex:1}"></div>
                        <div v-for="dev in pointDevices" :key="dev.name" :style="{position:'absolute',left:dev.x+'%',top:dev.y+'%',zIndex:2,transform:'translate(-50%,-50%)'}">
                            <i :class="deviceImages[dev.name]" style="font-size:36px;color:#1565C0;"></i>
                            <div style="text-align:center;font-size:12px;color:#333;">{{dev.name}}</div>
                        </div>
                    </div>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="pointDialogVisible=false">取 消</el-button>
                <el-button type="primary" @click="savePointInfo">确 定</el-button>
            </div>
        </el-dialog>
    </div>
    <script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.3/echarts.min.js"></script>
    <script>
        new Vue({
            el: '#sump-well-monitor',
            data() {
                return {
                    activeTab: 'list',
                    selectedWell: '',
                    wells: [
                        { name: '地下车库集水井', alert: true },
                        { name: '园区花园公区集水井', alert: false }
                    ],
                    devices: [
                        { well: '地下车库集水井', sump: '集水井1', name: '液位传感器1', type: '液位', level: '2.3m' },
                        { well: '地下车库集水井', sump: '集水井1', name: '水泵1', type: '水泵', status: '启动', temp: '38℃', noise: '60dB', current: '8A', voltage: '380V', mode: '自动' },
                        { well: '地下车库集水井', sump: '集水井2', name: '液位传感器2', type: '液位', level: '2.1m' },
                        { well: '地下车库集水井', sump: '集水井2', name: '水泵2', type: '水泵', status: '停止', temp: '36℃', noise: '58dB', current: '0A', voltage: '0V', mode: '手动' },
                        { well: '园区花园公区集水井', sump: '集水井1', name: '液位传感器1', type: '液位', level: '1.8m' },
                        { well: '园区花园公区集水井', sump: '集水井1', name: '水泵1', type: '水泵', status: '故障', temp: '45℃', noise: '70dB', current: '0A', voltage: '0V', mode: '自动' },
                        { well: '园区花园公区集水井', sump: '集水井2', name: '液位传感器2', type: '液位', level: '1.6m' },
                        { well: '园区花园公区集水井', sump: '集水井2', name: '水泵2', type: '水泵', status: '启动', temp: '39℃', noise: '62dB', current: '7A', voltage: '380V', mode: '自动' }
                    ],
                    alerts: [
                        { well: '地下车库集水井', device: '液位传感器1', type: '高水位告警', status: '未处理', time: '2024-06-01 10:30' },
                        { well: '地下车库集水井', device: '水泵1', type: '水泵故障', status: '未处理', time: '2024-06-01 11:00' },
                        { well: '园区花园公区集水井', device: '液位传感器1', type: '低水位告警', status: '未处理', time: '2024-06-02 09:30' }
                    ],
                    pointMarkers: {
                        '地下车库集水井': [
                            { device: '集水井1', type: '液位', x: 30, y: 60 },
                            { device: '集水井1', type: '水泵', x: 60, y: 40 },
                            { device: '集水井2', type: '液位', x: 50, y: 70 },
                            { device: '集水井2', type: '水泵', x: 80, y: 30 }
                        ],
                        '园区花园公区集水井': [
                            { device: '集水井1', type: '液位', x: 40, y: 50 },
                            { device: '集水井1', type: '水泵', x: 70, y: 60 },
                            { device: '集水井2', type: '液位', x: 60, y: 40 },
                            { device: '集水井2', type: '水泵', x: 85, y: 55 }
                        ]
                    },
                    bindDialogVisible: false,
                    bindForm: {
                        name: '',
                        devices: [],
                        sumpDevices: [] // 新增：用于存储绑定设备及其配置
                    },
                    allDevices: [
                        '液位传感器1',
                        '液位传感器2',
                        '水泵1',
                        '水泵2',
                        '温度传感器1',
                        '噪声传感器1',
                        '电流传感器1',
                        '电压传感器1'
                    ],
                    pointDialogVisible: false,
                    pointBgMode: 'image',
                    pointBgUrl: '',
                    pointBgColor: '#f5f7fa',
                    pointDevices: [],
                    deviceImages: {
                        '液位传感器1': 'el-icon-water-cup',
                        '液位传感器2': 'el-icon-water-cup',
                        '水泵1': 'el-icon-suitcase',
                        '水泵2': 'el-icon-suitcase',
                        '温度传感器1': 'el-icon-cold-drink',
                        '噪声传感器1': 'el-icon-bell',
                        '电流传感器1': 'el-icon-lightning',
                        '电压传感器1': 'el-icon-lightning'
                    },
                    dashboardWell: '',
                    dashboardSump: '',
                    dashboardPeriod: 'day',
                    selectedDevice: null,
                    selectedDeviceType: '',
                    selectedSump: '', // 新增：选中的集水井
                    sumps: [
                        { well: '地下车库集水井', name: '集水井1', level: '2.3', levelInput: '2.3' },
                        { well: '地下车库集水井', name: '集水井2', level: '2.1', levelInput: '2.1' },
                        { well: '园区花园公区集水井', name: '集水井1', level: '1.8', levelInput: '1.8' },
                        { well: '园区花园公区集水井', name: '集水井2', level: '1.6', levelInput: '1.6' }
                    ],
                    levelOptions: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
                }
            },
            computed: {
                filteredDevices() {
                    if (!this.selectedWell) return [];
                    return this.devices.filter(d => d.well === this.selectedWell);
                },
                filteredAlerts() {
                    if (!this.selectedWell) return [];
                    return this.alerts.filter(a => a.well === this.selectedWell);
                }
            },
            watch: {
                activeTab(val) {
                    if (val === 'dashboard') {
                        this.$nextTick(() => {
                            this.initDashboard();
                        });
                    }
                },
                selectedWell(val) {
                    // 当井房选择变化时，重置集水井选择
                    this.selectedSump = '';
                },
                dashboardWell() {
                    // 切换区域时，自动选中第一个集水井设备
                    const sumps = this.sumps.filter(s => s.well === this.dashboardWell);
                    this.dashboardSump = sumps.length ? sumps[0].name : '';
                    this.updateDashboardStats();
                    this.renderAllCharts();
                },
                dashboardSump() {
                    this.updateDashboardStats();
                    this.renderAllCharts();
                },
                dashboardPeriod() {
                    this.renderAllCharts();
                }
            },
            mounted() {
                this.dashboardWell = this.wells[0]?.name || '';
                this.selectedWell = this.wells[0]?.name || '';
                this.selectedSump = ''; // 设置默认值
                this.$nextTick(() => {
                    this.initDashboard();
                });
                this.animateDashboardNumbers();
            },
            methods: {
                openBindDialog(well) {
                    // 只显示当前区域下的集水井本体
                    this.allDevices = this.sumps.filter(s => s.well === well.name).map(s => s.name);
                    this.bindForm = {
                        name: well.name,
                        devices: [],
                        sumpDevices: [] // 初始化绑定设备列表
                    };
                    this.bindDialogVisible = true;
                },
                openPointDialog(well) {
                    // 根据绑定设备动态生成点位
                    const devs = this.devices.filter(d => d.well === well.name);
                    this.pointDevices = devs.map((d, idx) => ({
                        name: d.name,
                        type: d.type,
                        x: 30 + idx*20,
                        y: 50 + idx*10
                    }));
                    this.pointBgMode = 'image';
                    this.pointBgUrl = '';
                    this.pointBgColor = '#f5f7fa';
                    this.pointDialogVisible = true;
                },
                saveBindInfo() {
                    this.$message.success('保存成功（演示）');
                    this.bindDialogVisible = false;
                },
                handlePointBgUpload(file) {
                    const reader = new FileReader();
                    reader.onload = e => {
                        this.pointBgUrl = e.target.result;
                    };
                    reader.readAsDataURL(file.raw);
                },
                savePointInfo() {
                    this.$message.success('点位配置保存成功（演示）');
                    this.pointDialogVisible = false;
                },
                animateDashboardNumbers() {
                    const total = 3, unhandled = 2, handled = 1;
                    this.animateNum('alarm-total', total);
                    this.animateNum('alarm-unhandled', unhandled);
                    this.animateNum('alarm-handled', handled);
                },
                animateNum(id, target) {
                    const el = document.getElementById(id);
                    if (!el) return;
                    let n = 0;
                    const step = Math.max(1, Math.floor(target / 30));
                    const timer = setInterval(() => {
                        n += step;
                        if (n >= target) {
                            n = target;
                            clearInterval(timer);
                        }
                        el.textContent = n;
                    }, 30);
                },
                initDashboard() {
                    this.updateDashboardStats();
                    this.renderAllCharts();
                },
                updateDashboardStats() {
                    const well = this.dashboardWell;
                    const sump = this.dashboardSump;
                    const alerts = this.alerts.filter(a => a.well === well && a.device === sump);
                    const total = alerts.length;
                    const unhandled = alerts.filter(a => a.status === '未处理').length;
                    const handled = alerts.filter(a => a.status === '已处理').length;
                    this.animateNum('alarm-total', total);
                    this.animateNum('alarm-unhandled', unhandled);
                    this.animateNum('alarm-handled', handled);
                },
                renderAllCharts() {
                    this.renderLineChart('level-chart', '液位', 'm');
                    this.renderPumpCountChart('pump-count-chart');
                },
                renderLineChart(id, label, unit) {
                    const chart = echarts.init(document.getElementById(id));
                    let xData = [], yData = [];
                    const period = this.dashboardPeriod;
                    if (period === 'day') {
                        xData = Array.from({length: 24}, (_, i) => (i+1)+':00');
                    } else if (period === 'week') {
                        xData = ['周一','周二','周三','周四','周五','周六','周日'];
                    } else {
                        xData = Array.from({length: 30}, (_, i) => (i+1)+'日');
                    }
                    yData = xData.map((_, i) => (1.5 + Math.random()*1.5).toFixed(2));
                    chart.resize();
                    chart.setOption({
                        xAxis: { type: 'category', data: xData, boundaryGap: false },
                        yAxis: { type: 'value', axisLabel: { formatter: `{value} ${unit}` } },
                        series: [{
                            data: yData,
                            type: 'line',
                            smooth: true,
                            areaStyle: { color: '#90caf9' },
                            lineStyle: { color: '#1565C0', width: 2 },
                            symbol: 'circle',
                            symbolSize: 6
                        }],
                        tooltip: { trigger: 'axis' },
                        grid: { left: 40, right: 20, top: 30, bottom: 30 },
                        title: { text: '', left: 'center', top: 0, textStyle: { fontSize: 14 } }
                    });
                },
                renderPumpCountChart(id) {
                    const chart = echarts.init(document.getElementById(id));
                    let xData = [], yData = [];
                    const period = this.dashboardPeriod;
                    if (period === 'day') {
                        xData = Array.from({length: 24}, (_, i) => (i+1)+':00');
                    } else if (period === 'week') {
                        xData = ['周一','周二','周三','周四','周五','周六','周日'];
                    } else {
                        xData = Array.from({length: 30}, (_, i) => (i+1)+'日');
                    }
                    yData = xData.map((_, i) => Math.floor(Math.random()*5+1));
                    chart.resize();
                    chart.setOption({
                        xAxis: { type: 'category', data: xData },
                        yAxis: { type: 'value', axisLabel: { formatter: '{value} 次' } },
                        series: [{
                            data: yData,
                            type: 'bar',
                            barWidth: 18,
                            itemStyle: { color: '#67C23A' }
                        }],
                        tooltip: { trigger: 'axis' },
                        grid: { left: 40, right: 20, top: 30, bottom: 30 },
                        title: { text: '', left: 'center', top: 0, textStyle: { fontSize: 14 } }
                    });
                },
                remotePumpControl(row, action) {
                    if (action === 'start') {
                        row.status = '启动';
                        this.$message.success(row.name + ' 启动成功（演示）');
                    } else {
                        row.status = '停止';
                        this.$message.success(row.name + ' 停止成功（演示）');
                    }
                },
                selectDevice(marker) {
                    this.selectedDevice = marker;
                    this.selectedDeviceType = marker.type;
                },
                getDeviceData(name) {
                    return this.devices.filter(d => d.well === this.selectedWell && d.name === name);
                },
                getDeviceAlerts(name) {
                    return this.alerts.filter(a => a.well === this.selectedWell && a.device === name);
                },
                getDeviceAlertStatus(name) {
                    return this.alerts.some(a => a.well === this.selectedWell && a.device === name && a.status === '未处理');
                },
                getPumpStatusType(status) {
                    switch (status) {
                        case '启动': return 'success';
                        case '停止': return 'info';
                        case '故障': return 'danger';
                        case '手动':
                        case '自动':
                            return 'warning';
                        default: return 'info';
                    }
                },
                getBindDeviceCount(row) {
                    // 统计该井房下设备数量
                    return this.devices.filter(d => d.well === row.name).length;
                },
                hasOffline(row) {
                    // 判断该井房下是否有离线设备（演示：假设status为'离线'的为离线）
                    return this.devices.some(d => d.well === row.name && d.status === '离线');
                },
                getSumpLevel(well, sump) {
                    // 获取液位百分比（如有多个液位传感器，取第一个）
                    const dev = this.devices.find(d => d.well === well && d.sump === sump && d.type === '液位');
                    return dev && dev.level ? dev.level : '--';
                },
                getSumpLevelValue(level) {
                    return parseFloat(level).toFixed(1);
                },
                getSumpLevelPercentage(level) {
                    const min = 0;
                    const max = 10;
                    const value = parseFloat(level);
                    if (isNaN(value) || value < min || value > max) return 0;
                    return ((value - min) / (max - min)) * 100;
                },
                getSumpLevelStatusColor(level, sumpName) {
                    const value = parseFloat(level);
                    if (isNaN(value)) return 'info';

                    // 简化的状态判断逻辑
                    if (value <= 2 || value >= 8) {
                        return 'danger';
                    } else if (value <= 4 || value >= 6) {
                        return 'warning';
                    }
                    return 'success';
                },
                getSumpLevelStatusText(level, sumpName) {
                    const value = parseFloat(level);
                    if (isNaN(value)) return '未知';

                    // 简化的状态判断逻辑
                    if (value <= 2) {
                        return '超低';
                    } else if (value <= 4) {
                        return '低';
                    } else if (value <= 6) {
                        return '正常';
                    } else if (value <= 8) {
                        return '高';
                    } else {
                        return '超高';
                    }
                },
                updateSumpLevelFromSelect(sump) {
                    const value = parseFloat(sump.levelInput);
                    if (isNaN(value) || value < 0 || value > 10) {
                        this.$message.error('请选择有效的液位值');
                        return;
                    }
                    sump.level = value.toFixed(1);
                },
                isDeviceOffline(deviceName) {
                    // 判断设备是否离线（演示：名字带“2”视为离线）
                    return deviceName && deviceName.indexOf('2') > -1;
                },
                showSumpDeviceSelector() {
                    const availableSumpDevices = [
                        { id: 'sump1', name: '集水井1', description: '地下车库主集水井' },
                        { id: 'sump2', name: '集水井2', description: '地下车库备用集水井' },
                        { id: 'sump3', name: '集水井3', description: '园区花园集水井' }
                    ];
                    
                    window.availableSumpDevicesList = availableSumpDevices;
                    window.selectedSumpDeviceIndex = undefined;
                    
                    window.selectSumpDevice = (index) => {
                        window.selectedSumpDeviceIndex = index;
                        document.querySelectorAll('.sump-device-item').forEach(el => {
                            el.style.backgroundColor = '#F5F7FA';
                            el.style.color = 'inherit';
                        });
                        const selectedEl = document.querySelector(`.sump-device-item[data-index="${index}"]`);
                        if (selectedEl) {
                            selectedEl.style.backgroundColor = '#409EFF';
                            selectedEl.style.color = '#fff';
                        }
                    };
                    
                    const deviceList = availableSumpDevices.map((device, index) => 
                        `<div class="sump-device-item" data-index="${index}" onclick="window.selectSumpDevice(${index})" style="padding: 8px; border: 1px solid #DCDFE6; border-radius: 4px; margin-bottom: 8px; cursor: pointer; background: #F5F7FA;">
                            <div style="font-weight: bold; color: #303133;">${device.name}</div>
                            <div style="font-size: 12px; color: #606266; margin-top: 4px;">${device.description}</div>
                        </div>`
                    ).join('');
                    
                    this.$msgbox({
                        title: '选择集水井设备',
                        dangerouslyUseHTMLString: true,
                        message: `<p>请选择要添加的集水井设备：</p><div style="margin-top: 10px;">${deviceList}</div>`,
                        showCancelButton: true,
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        beforeClose: (action, instance, done) => {
                            if (action === 'confirm' && window.selectedSumpDeviceIndex !== undefined) {
                                const selectedDevice = window.availableSumpDevicesList[window.selectedSumpDeviceIndex];
                                this.addSumpDeviceToBindForm(selectedDevice);
                                window.selectedSumpDeviceIndex = undefined;
                                window.availableSumpDevicesList = undefined;
                                window.selectSumpDevice = undefined;
                                done();
                            } else if (action === 'cancel') {
                                window.selectedSumpDeviceIndex = undefined;
                                window.availableSumpDevicesList = undefined;
                                window.selectSumpDevice = undefined;
                                done();
                            } else {
                                this.$message.warning('请先选择一个设备');
                            }
                        }
                    });
                },
                addSumpDeviceToBindForm(device) {
                    if (!this.bindForm.sumpDevices) this.bindForm.sumpDevices = [];
                    if (this.bindForm.sumpDevices.length >= 2) {
                        this.$message.warning('每个区域只允许绑定两个集水井设备');
                        return;
                    }
                    if (this.bindForm.sumpDevices.some(d => d.name === device.name)) {
                        this.$message.warning('该设备已绑定');
                        return;
                    }
                    this.bindForm.sumpDevices.push({
                        name: device.name,
                        minValue: '0',
                        maxValue: '10',
                        unit: '米',
                        warningRanges: {
                            ultraLow: '0 - 2',
                            low: '2 - 4',
                            normal: '4 - 6',
                            high: '6 - 8',
                            ultraHigh: '8 - 10'
                        },
                        showRefreshButton: false,
                        showWarningRefreshButton: false
                    });
                },
                removeSumpDevice(index) {
                    this.$confirm('确定要删除该集水井设备吗？', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        this.bindForm.sumpDevices.splice(index, 1);
                        this.$message({
                            type: 'success',
                            message: '集水井设备已删除'
                        });
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消删除'
                        });
                    });
                },
                onSumpRangeChange(index) {
                    const device = this.bindForm.sumpDevices[index];
                    if (device.minValue && device.maxValue) {
                        this.$set(device, 'showRefreshButton', true);
                    } else {
                        this.$set(device, 'showRefreshButton', false);
                    }
                },
                refreshSumpEffectiveRange(index) {
                    const device = this.bindForm.sumpDevices[index];
                    const minValue = parseFloat(device.minValue);
                    const maxValue = parseFloat(device.maxValue);
                    
                    if (isNaN(minValue) || isNaN(maxValue) || minValue >= maxValue) {
                        this.$message.error('请输入有效的范围值');
                        return;
                    }
                    
                    const range = maxValue - minValue;
                    const step = range / 5;
                    
                    device.warningRanges = {
                        ultraLow: `${minValue.toFixed(1)} - ${(minValue + step).toFixed(1)}`,
                        low: `${(minValue + step).toFixed(1)} - ${(minValue + step * 2).toFixed(1)}`,
                        normal: `${(minValue + step * 2).toFixed(1)} - ${(minValue + step * 3).toFixed(1)}`,
                        high: `${(minValue + step * 3).toFixed(1)} - ${(minValue + step * 4).toFixed(1)}`,
                        ultraHigh: `${(minValue + step * 4).toFixed(1)} - ${maxValue.toFixed(1)}`
                    };
                    
                    // 更新值1和值6的输入框
                    const value1Input = document.getElementById(`sumpWarningValue1_${index}`);
                    const value6Input = document.getElementById(`sumpWarningValue6_${index}`);
                    if (value1Input) value1Input.value = minValue.toFixed(1);
                    if (value6Input) value6Input.value = maxValue.toFixed(1);
                    
                    this.$set(device, 'showRefreshButton', false);
                    this.$message.success('有效范围已刷新，预警范围已更新');
                },
                onSumpWarningValueInput(index) {
                    const device = this.bindForm.sumpDevices[index];
                    const value2 = document.getElementById(`sumpWarningValue2_${index}`).value;
                    const value3 = document.getElementById(`sumpWarningValue3_${index}`).value;
                    const value4 = document.getElementById(`sumpWarningValue4_${index}`).value;
                    const value5 = document.getElementById(`sumpWarningValue5_${index}`).value;
                    
                    if (value2 && value3 && value4 && value5) {
                        this.$set(device, 'showWarningRefreshButton', true);
                    } else {
                        this.$set(device, 'showWarningRefreshButton', false);
                    }
                },
                refreshSumpWarningRanges(index) {
                    const device = this.bindForm.sumpDevices[index];
                    const value1 = parseFloat(document.getElementById(`sumpWarningValue1_${index}`).value);
                    const value2 = parseFloat(document.getElementById(`sumpWarningValue2_${index}`).value);
                    const value3 = parseFloat(document.getElementById(`sumpWarningValue3_${index}`).value);
                    const value4 = parseFloat(document.getElementById(`sumpWarningValue4_${index}`).value);
                    const value5 = parseFloat(document.getElementById(`sumpWarningValue5_${index}`).value);
                    const value6 = parseFloat(document.getElementById(`sumpWarningValue6_${index}`).value);
                    
                    if (isNaN(value1) || isNaN(value2) || isNaN(value3) || isNaN(value4) || isNaN(value5) || isNaN(value6)) {
                        this.$message.error('请输入有效的数值');
                        return;
                    }
                    
                    if (value1 >= value2 || value2 >= value3 || value3 >= value4 || value4 >= value5 || value5 >= value6) {
                        this.$message.error('数值必须按照递增顺序排列');
                        return;
                    }
                    
                    device.warningRanges = {
                        ultraLow: `${value1.toFixed(1)} - ${value2.toFixed(1)}`,
                        low: `${value2.toFixed(1)} - ${value3.toFixed(1)}`,
                        normal: `${value3.toFixed(1)} - ${value4.toFixed(1)}`,
                        high: `${value4.toFixed(1)} - ${value5.toFixed(1)}`,
                        ultraHigh: `${value5.toFixed(1)} - ${value6.toFixed(1)}`
                    };
                    
                    this.$set(device, 'showWarningRefreshButton', false);
                    this.$message.success('数值符合标准，预警范围已更新');
                },
                handleAlertDoubleClick(row) {
                    this.$confirm(`确定要跳转到告警中心处理告警"${row.type}"吗？`, '处理告警', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        this.jumpToAlarmCenter(row);
                    }).catch(() => {
                        // 取消处理
                    });
                },
                jumpToAlarmCenter(alert) {
                    // 模拟跳转到告警中心
                    this.$message.success(`正在跳转到告警中心处理告警：${alert.type}`);
                    // 这里可以添加实际的跳转逻辑
                    // 例如：window.open('/alarm-center', '_blank');
                    console.log('跳转到告警中心处理告警:', alert);
                }
            }
        });
    </script>
</body>
</html> 